<template>
  <page-card title="任务管理">
    <div class="table-page-search-wrapper">
      <slot name="searchWrapper" />
      <a-row
        v-if="!$slots.searchWrapper"
        type="flex"
        style="margin-bottom: 20px"
        justify="end"
      >
        <a-col flex="1">
          <a-space>
            <slot name="buttons" />
            {{ $slots.buttons }}
            <template v-if="!$slots.buttons">
              <a-button type="primary" icon="plus" @click="handleEdit()">
                新增
              </a-button>
            </template>
          </a-space>
        </a-col>
        <template>
          <a-col
            :span="4"
            style="display: flex; justify-content: space-between"
          >
            <slot name="search" />
            <a-input-search
              style="width: 240px"
              v-if="!$slots.search"
              v-model="queryParam.jobName"
              placeholder="任务名称"
              allow-clear
              @search="search"
            />
            <!-- <a-input-search style="width:240px"
                            v-if="!$slots.search"
                            v-model="queryParam.jobGroup"
                            placeholder="任务组"
                            allow-clear
                            @search="search" /> -->
          </a-col>
        </template>
      </a-row>
    </div>
    <slot name="table" />
    <a-table
      v-if="!$slots.table"
      :columns="columns"
      :rowKey="(record, index) => index"
      :data-source="data"
      @change="handleTableChange"
      :pagination="pagination"
    >
      <span slot="status" slot-scope="text, record">
        <a-popconfirm
          :title="record.status == '1' ? '是否关闭' : '是否开启'"
          ok-text="是"
          cancel-text="否"
          @confirm="onChange(record.id, record.status)"
        >
          <a-switch :checked="record.status == '1' ? true : false" />
        </a-popconfirm>
      </span>
      <span slot="action" slot-scope="text, record">
        <template v-for="(action, index) in actions">
          <span :key="index">
            <a-divider type="vertical" v-if="index > 0" />
            <a
              v-if="action.code != 'delete'"
              @click="action.fn(record.id, record.name)"
            >
              {{ action.text }}
            </a>
            <a-popconfirm
              v-else
              title="确认删除？"
              ok-text="是"
              cancel-text="否"
              @confirm="action.fn(record.id)"
            >
              <a href="javascript:;">
                {{ action.text }}
              </a>
            </a-popconfirm>
          </span>
        </template>
      </span>
    </a-table>
  </page-card>
</template>

<script>
import { PAGINATION, TABLE_STATUS_CELL } from '../../constants'
import { listTask, startTask, stopTask, deleteTask } from '../../api/quartz'
export default {
  props: {
    onLoad: {
      type: Function,
      default: null,
    },
    onDelete: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      data: [],
      pagination: PAGINATION,
      statusCell: TABLE_STATUS_CELL,
      queryParam: {},
      actions: [],
      columns: [
        {
          title: '任务名称',
          align: 'center',
          width: 100,
          dataIndex: 'jobName',
        },
        {
          title: '应用名称',
          align: 'center',
          width: 100,
          dataIndex: 'appName',
          ellipsis: true,
        },
        {
          title: '紧急程度',
          align: 'center',
          hidden: true,
          width: 100,
          dataIndex: 'jinji',
        },
        {
          title: '进度（批次）',
          align: 'center',
          width: 100,
          ellipsis: true,
          dataIndex: 'pici',
        },
        {
          title: '填报预警',
          width: 100,
          align: 'center',
          dataIndex: 'warn',
        },
        {
          title: '状态',
          width: 100,
          align: 'center',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '启用/停用',
          width: 100,
          align: 'center',
          dataIndex: 'kaiguanstatus',
          scopedSlots: { customRender: 'kaiguanstatus' },
        },
        {
          title: '发起人',
          width: 100,
          align: 'center',
          dataIndex: 'createUser',
        },
        {
          title: '创建时间',
          width: 180,
          align: 'center',
          dataIndex: 'createTime',
        },
        {
          title: '截止时间',
          width: 180,
          align: 'center',
          dataIndex: 'endTime',
        },
      ],
    }
  },
  created() {
    let width = 180,
      me = this
    // if (this.hasPermission('edit') && (width += 28)) {
    this.actions.push({
      text: '编辑',
      code: 'edit',
      fn: this.handleEdit,
    })
    this.actions.push({
      text: '详情',
      code: 'detail',
      fn: this.handleDetail,
    })
    // }
    // if (this.hasPermission('delete') && (width += 28)) {
    this.actions.push({
      text: '撤回',
      code: 'delete',
      fn: this.handleDelete,
    })
    // }
    // if (this.actions.length > 0) {
    this.columns.push({
      title: '操作',
      width: width,
      align: 'center',
      scopedSlots: { customRender: 'action' },
    })
    // }
    // 未重写table，调用默认加载列表数据接口
    !this.$route.meta.keepAlive && !this.$slots.table && this.load()
  },
  activated() {
    // 未重写table，调用默认加载列表数据接口
    !this.$slots.table && this.load()
  },
  methods: {
    onChange(id, status) {
      if (status == '1') {
        stopTask(id).then((res) => {
          this.load()
        })
      } else {
        startTask(id).then((res) => {
          this.load()
        })
      }
    },
    search() {
      this.pagination.current = 1
      this.load()
    },
    load() {
      this.queryParam.currPage = this.pagination.current
      this.queryParam.pageSize = this.pagination.pageSize
      this.data = [
        {
          jobName: '返工填报',
          appName: '公安内部应用',
          jinji: '一般',
          jindu: '1/4',
          warn: '已逾期(10)',
          status: '1',
          createUser: '张三',
          createTime: '2022-09-23 10:23',
          endTime: '2022-09-23 10:23',
        },
      ]
      if (this.onLoad) {
        // listTask({ ...this.queryParam }).then((response) => {
        //   this.data = response.list
        //   this.pagination.current = response.currPage
        //   this.pagination.total = response.totalCount
        //   this.pagination.pageSize = response.pageSize
        // })
      } else {
        // listTask({ ...this.queryParam }).then((response) => {
        //   this.data = response.list
        //   this.pagination.current = response.currPage
        //   this.pagination.total = response.totalCount
        //   this.pagination.pageSize = response.pageSize
        // })
      }
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      this.load()
    },
    handleEdit(id) {
      this.$router.push({
        path: '/task/vedit',
        query: { id },
      })
    },
    handleDetail(id) {
      this.$router.push({
        path: '/task/detail',
        query: { id },
      })
    },
    handleDelete(id) {
      if (this.onDelete) {
        this.onDelete(id).then((response) => {
          this.load()
        })
      } else {
        deleteTask(id).then((res) => {
          this.message.success('删除成功')
          this.load()
        })
      }
    },
  },
}
</script>

<style></style>